import React, {Component} from "react";
import {inject, observer} from "mobx-react";
import {observable, action} from "mobx";

@observer
class DetailVerify extends Component {
    constructor(props) {
        super(props);
        this.studentVerifyModel = this.props.store.getModel();
    }

    @action handleChange = e => {
        switch (e.target.name) {
            case "sex" :
                this.studentVerifyModel.sex = e.target.value;
                break;
            case "phone" :
                this.studentVerifyModel.phone = e.target.value;
                break;
            case "email":
                this.studentVerifyModel.email = e.target.value;
                break;
            case "job" :
                this.studentVerifyModel.job = e.target.value;
                break;
            case "duty" :
                this.studentVerifyModel.duty = e.target.value;
                break;
            case "company":
                this.studentVerifyModel.company = e.target.value;
                break;
            case "workAddress":
                this.studentVerifyModel.workAddress = e.target.value;
        }
    };

    isEmpty = (obj) => {
        for (var name in obj) {
            return false;
        }
        return true;
    };

    add = () => {
        const {sex,phone, job, workAddress} = this.studentVerifyModel;
        if (this.isEmpty(sex)) {
            alert("请选择性别");
            return;
        }
        if (this.isEmpty(phone)) {
            alert("手机号码不能为空");
            return;
        }
        if (this.isEmpty(job)) {
            alert("职业不能为空");
            return;
        }
        if (this.isEmpty(workAddress)) {
            alert("工作地址不能为空");
            return;
        }
        this.props.store.setModel(this.studentVerifyModel);
        this.props.store.addStudent(this.studentVerifyModel);
    };

    render() {
        const {studentID, phone, email, job, duty, company, workAddress} = this.props.store.studentVerifyModel;
        return (
            <div>
                <h2>完善信息</h2>
                <div>
                    <label><span>*</span>性别：<input onClick={this.handleChange} type="radio" name="sex" value="man"/><span>男</span> <input onClick={this.handleChange} type="radio" name="sex" value="woman"/><span>女</span>
                    </label>
                </div>
                <div>
                    <label>学号：<input name="studentID" type="text" value={studentID}/>
                    </label>
                </div>
                <div>
                    <label><span>*</span>手机号码：<input name="phone" type="text" value={phone} onChange={this.handleChange}/>
                    </label>
                </div>
                <div>
                    <label>邮箱：<input name="graduateYear" type="text" value={email} onChange={this.handleChange}/>
                    </label>
                </div>
                <div>
                    <label><span>*</span>职业：<input name="job" type="text" value={job} onChange={this.handleChange}/>
                    </label>
                </div>
                <div>
                    <label>职务：<input name="duty" type="text" value={duty} onChange={this.handleChange}/>
                    </label>
                </div>
                <div>
                    <label>所在单位：<input name="company" type="text" value={company} onChange={this.handleChange}/>
                    </label>
                </div>
                <div>
                    <label><span>*</span>工作地址：<input name="workAddress" type="text" value={workAddress} placeholder="如：XXX省XXX市" onChange={this.handleChange}/>
                    </label>
                </div>
                <button onClick={this.add}>提交</button>
            </div>
        );
    }
}

export default observer(DetailVerify);
